<template>
  <div class="tabs">
    <div style="flex:8" class="flex flex-row">
      <div v-for="item in tabList" :style="{flex:isFl1?'1':''}" :class="{bor:selectIndx === item.value}" class="tabIn flex a-item j-content" @click="clickTabs(item)">
        <p>{{ item.name }}</p>
        <div v-if="item.summary" class="num flex a-item j-content">
          {{ item.summary }}
        </div>
      </div>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'SaleTabs',
  props: {
    tabList: {
      type: Object,
      default: null
    },
    isFl1: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectIndx: 0
    }
  },
  watch: {
    // tabList:{
    //   handler(n){
    //     console.log(n)
    //   },
    //   deep:true
    // }
  },
  methods: {
    clickTabs(e) {
      this.selectIndx = e.value
      this.$emit('change', e)
    }
  }

}
</script>

<style lang="scss" scoped>
.tabs{
  position: absolute;
  height: auto;
  font-size: 12px !important;
  width: 100%;
  left:0;
  display: flex;
  flex-direction: row;
  min-width: 900px;
  .tabIn{
    //left: 10%;
    //border: 1px solid gray;
    font-weight: bolder;
    //display: inline-block;

    width: 100px;
    position: relative;
    //margin-left: 10px;
    padding:0 10px;
    //min-width: 110px;

    cursor: pointer;
    border-radius: 4px 4px 0 0 ;
    border: 1px solid #ffffff;
    line-height: 10px;
  }
}
.click{
  border: 1px solid #E4E7ED;
  color: #409eff;
}
.bor{
  color: #409EFF;
  border: 2px solid #d8d8d8 !important;
}
.num{
  padding: 3px;
  min-width: max-content;
  width: 15px;
  height: 13px;
  border-radius: 13px;
  background: red;
  color: #fff;
  font-size: 10px;
  position: absolute;
  right: 0;
  top: 18%;
}
.slot{
  width: 100px;
  height: 30px;
}
</style>
